<%@ page contentType="text/html;charset=UTF-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="shiro" uri="http://shiro.apache.org/tags" %>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %> 
<%@ taglib prefix="tags" tagdir="/WEB-INF/tags" %>
<c:set var="ctx" value="${pageContext.request.contextPath}"/>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
    
	
	<title>_${customer.customerName}_库存查询管理</title>
	<script type="text/javascript">
		var datatable_content_cur;
		var datatable_content_pre;
		var datatable_content_viewCusStock;
		var datatable_content_cusStock;
		var filterParam = {};
		function initCusStockTable(){
			datatable_content_cusStock = $("#cusStockTable").dataTable({
			   "bServerSide":true,
			   "bAutoWidth":false,
	           "sAjaxSource":'${ctx}/cusStock/query_cusStock',
	           "fnServerData": callback,
	           "fnRowCallback":rowCallBack,
	           "bFilter": false,
	           "bSort": false,
	           "sZeroRecords": "查询无记录！",
	           "bProcessing": true,
	           "oLanguage": {
	               "sUrl": '${ctx}/static/v2/js/plugins/datatables/cn.txt'
	            },
	             "aoColumns":[
	             	 {"mData": null},
	             	 {"mData": "customer.customerName"},
	             	 {"mData": "warehouse.groupName"},
	             	 {"mData": "stockCode"},
	             	 {"mData": "boxCode"},
	             	 {"mData": "sku"},
	             	 {"mData": "batchCode"},
	             	 {"mData": "productDate"},
	             	 {"mData": "expireDate"},
	             	 {"mData": "bar"},
	             	 {"mData": "goodsName"},
	             	 {"mData": "salesNum"},
	             	 {"mData": "unusedNum"},
	             	 {"mData": "orderNum"},
	             	 {"mData": "lockedNum"},
	             	 {"mData": "transportNum"},
	             	 {"mData": "airNum"},
	             	 {"mData": "totalNum"},
	             	 {"mData": null},
	             ],
	             "aoColumnDefs":[
	             	{"aTargets": [18],
		              "mRender": function (data, display, row) {
							return  row.boxType == "prepkg" ? "<font color=blue>预包装</font>" : "普通";
			           }
		            },
	             ],
			});
			return datatable_content_cusStock;
		}
		
		function initViewStockTable(){
			datatable_content_viewCusStock = $("#viewStockTable").dataTable({
			   "bServerSide":true,
			   "bAutoWidth":false,
	           "sAjaxSource":'${ctx}/cusStock/query_viewCusStock',
	           "fnServerData": callback,
	           "fnRowCallback":rowCallBack,
	           "bFilter": false,
	           "bSort": false,
	           "sZeroRecords": "查询无记录！",
	           "bProcessing": true,
	           "oLanguage": {
	               "sUrl": '${ctx}/static/v2/js/plugins/datatables/cn.txt'
	            },
	             "aoColumns":[
	             	{"mData": null},
	             	 {"mData": "customer.customerName"},
	             	 {"mData": "warehouse.groupName"},
	             	 {"mData": "sku"},
	             	 {"mData": "bar"},
	             	 {"mData": "goodsName"},
	             	 {"mData": "salesNum"},
	             	 {"mData": "unusedNum"},
	             	 {"mData": "orderNum"},
	             	 {"mData": "lockedNum"},
	             	 {"mData": "transportNum"},
	             	 {"mData": "airNum"},
	             	 {"mData": "totalNum"},
	             	 {"mData": null},
	             ],
	             "aoColumnDefs":[
	             	{"aTargets": [13],
		              "mRender": function (data, display, row) {
						  return  "<a href=\"#detail\" data-toggle=\"modal\" class=\"btn btn-primary \""+"name=\""+row.customer.customerCode+"_"+row.warehouseCode+"_"+row.sku+"\""+ "id=\""+row.customer.customerCode+"_"+row.warehouseCode+"_"+row.sku+"\" onclick=\"showDetail(this);\">查看明细</a>";
			           }
		            },
	             ],
			});
			return datatable_content_viewCusStock;
		}
		
		function filter(item){
			filterParam[item.name] = item;
		}
		function callback(sSource, aoData, fnCallback ) {
		   	var formParam = $("#queryForm").serializeArray();
			for(var n in filterParam){
				formParam.push(filterParam[n]);
			}
		   $.ajax({ 
		       "type": "post",
		       "contentType": "application/json", 
		       "url": sSource,    
		       "dataType": "json",   
		       "data": JSON.stringify(aoData.concat(formParam)),
		       "success": function (data) {
				   fnCallback(data);
                   //关闭遮罩
				   closeBg();
			   }
		   });
		}
		
		/**
		*创建了行的回调
		*nRow为当前的tr
		*/
		function rowCallBack(nRow, aData, iDisplayIndex, iDisplayIndexFull){
			var iDisplayStart = datatable_content_cur.fnSettings()._iDisplayStart;
			$("td:eq(0)", nRow).html(iDisplayStart+iDisplayIndex+1);
		}
		
		function load(){
			if($("#queryForm").valid()){
                //开启遮罩
				showBg();
				var flag = $("#_flag").val();
				findCurTable(flag);
				if (datatable_content_cur) {
					datatable_content_cur.fnDestroy();
				}
				if(datatable_content_pre && datatable_content_pre != datatable_content_cur ){
					$(datatable_content_pre.fnSettings().nTableWrapper).hide();
				}
				initTable(flag);
				$(datatable_content_cur.fnSettings().nTable).show();
			}
		}
		function initTable(flag) {
			if (flag == "sku" || flag == "bar" || flag == "name") {
				datatable_content_cur = initViewStockTable();
			} else if (flag == "stockCode" || flag == "boxCode") {
				datatable_content_cur = initCusStockTable();
			}
		}

		function findCurTable(flag) {
			if (flag == "sku" || flag == "bar" || flag == "name") {
				if(datatable_content_cur != datatable_content_viewCusStock){
					datatable_content_cur = datatable_content_viewCusStock;
					datatable_content_pre = datatable_content_cusStock;
				}
			} else if (flag == "stockCode" || flag == "boxCode") {
				if(datatable_content_cur != datatable_content_cusStock){
					datatable_content_cur = datatable_content_cusStock;
					datatable_content_pre = datatable_content_viewCusStock;
				}
			}
		}
		$(function() {

			$("#queryForm").validate();
			$('#_sku').hide();
			$('#_bar').hide();
			$('#_stockCode').hide();
			$('#viewStockTable').hide();
			$('#cusStockTable').hide();
			$("input[name=chooser]").on("ifChecked", function(event){
				change(event.target.value);
			});
			$("#chooser_sku").iCheck("check");

		});

		function showDetail(e) {
			var id = $(e).attr("id");
			var info = id.split("_");
			var customerCode = info[0];
			var warehouseCode = info[1];
			var sku = info[2];

			var name = $(e).attr("name");
			var info2 = name.split("_");
			var customerName = info2[0];
			var warehouseCode = info2[1];

			$("#customerName").html(customerName);
			$("#warehouseName").html(warehouseCode);
			$("#sku").html(sku);

			$.ajax({
				type : 'post',
				url : '${ctx}/cusStock/stockDetail',
				data : {
					customerCode : customerCode,
					warehouseCode : warehouseCode,
					sku : sku
				},
				dataType : 'json',
				success : function(data) {
					var stockList = data.stockList;

					//库位信息
					$("#detail_content").html("");
					var str = '';
					$.each(stockList, function(i) {
						var stock = stockList[i];
						str += "<tr>";
						str += "<td>" + stock.stockCode + "</td>";
						str += "<td>" + stock.boxCode + "</td>";
						str += "<td>" + stock.salesNum + "</td>";
						str += "<td>" + stock.unusedNum + "</td>";
						str += "<td>" + stock.orderNum + "</td>";
						str += "<td>" + stock.lockedNum + "</td>";
						str += "<td>" + stock.transportNum + "</td>";
						str += "<td>" + stock.airNum + "</td>";
						str += "<td>" + stock.totalNum + "</td>";

						var boxType = stock.boxType;

						if (boxType == 'prepkg') {
							str += "<td><font color=blue>预包装</font></td>";
						} else {
							str += "<td>普通</td>";
						}

						str += "</tr>";
					});
					$("#detail_content").html(str);

				},
				error : function() {
					alert("网络繁忙，请稍后重试...");
				}
			});
		}

		function change(v) {
			$('#_flag').val(v);
			$("input[type=text]",$("#textDiv")).val("");
			$("input[type=text]",$("#textDiv")).hide();
			$("#_"+v).show();
		}

		//导出Excel
		function exportExcel() {

			var flag = $("#_flag").val();

			if (flag == "sku") {
				$("#queryForm").attr("action", '${ctx}/cusStock/exp_sku');
			} else if (flag == "bar") {
				$("#queryForm").attr("action", '${ctx}/cusStock/exp_bar');
			} else if (flag == "name") {
				$("#queryForm").attr("action", '${ctx}/cusStock/exp_name');
			} else if (flag == "stockCode") {
				$("#queryForm").attr("action", '${ctx}/cusStock/exp_stockCode');
			} else if (flag == "boxCode") {
				$("#queryForm").attr("action", '${ctx}/cusStock/exp_boxCode');
			}

			$("#queryForm").submit();

		}
	</script>
</head>

<body>
<div id="fullbg"></div>
<div id="dialog">
	<div>
		<img src="${ctx }/static/022.gif"></img>
	</div>
</div>
<section class="content">
	<div class="row">
		<div class="col-md-12">

			<!-- Primary box -->
			<div class="box box-solid box-primary">
				<div class="box-header">
					<i class="fa fa-search"></i>
					<h3 class="box-title">搜索栏</h3>
					<div class="box-tools pull-right">
						<button class="btn btn-primary btn-sm" data-widget="collapse" type="button">
							<i class="fa fa-minus"></i>
						</button>
					</div>
				</div>
				<div class="box-body">	
	
	<form class="form-search" id="queryForm"  method="post">
		      <div class="form-group row">
			  <div class="col-sm-4">
			  <div class="input-group col-sm-12">
	      
		      <label class="input-group-text">商家用户:</label>
			  <select class="form-control"  id="_customerCode" name="_EQ_customer.customerCode"  onchange="ajaxAreaGroup(this,'_warehouseCode');">
				        <option value=""></option>
						<c:forEach items="${customerList}" var="customer">
							<option value="${customer.customerCode}">${customer.customerName}</option>
						</c:forEach>
				</select> 
		        </div>
		        </div>
		        
		        <div class="col-sm-4">
				<div class="input-group col-sm-12">
				<label class="input-group-text">商家仓库：</label> 
				<select  name="_EQ_warehouseCode"  id="_warehouseCode" class="form-control">
					<option value=""></option>
					<c:forEach items="${warehouseList}" var="wm">
						<option value="${wm.groupCode}">${wm.groupName}</option>
					</c:forEach>
				</select>
				</div>
				</div>
				
				</div>
			    
			    <div class="form-group row" id="textDiv">
			    <div class="col-sm-4">
			    <div class="input-group col-sm-12">
				<input type="hidden" id="_flag" value="${_flag}"/>
				<input name="chooser" id="chooser_sku" type="radio" value="sku"   onchange="change('sku');" class="input-group-text" />SKU编码
				<input name="chooser" id="chooser_bar" type="radio" value="bar"   onchange="change('bar');" class="input-group-text"/>货号
				<input name="chooser" id="chooser_name" type="radio" value="name"   onchange="change('name');" class="input-group-text"/>商品名
				<input name="chooser" id="chooser_stockCode" type="radio" value="stockCode" onchange="change('stockCode');"   class="input-group-text"/>库位编码
				<input name="chooser" id="chooser_boxCode" type="radio" value="boxCode" onchange="change('boxCode');"   class="input-group-text"/>箱子编码
				</div>
				</div>
				
				<div class="col-sm-4">
			    <div class="input-group col-sm-12">
				<input type="text" name="_LIKE_sku" id="_sku" class="form-control" value="${param._sku}"   />
				
				<input type="text" name="_LIKE_bar" id="_bar" class="form-control" value="${param._bar}"  />
				
				<input type="text" name="_LIKE_goodsName" id="_name" class="form-control" value="${param._name}" />
				
				<input type="text" name="_LIKE_stockCode" id="_stockCode" class="form-control" value="${param._stockCode}" />
				
				<input type="text" name="_LIKE_boxCode" id="_boxCode" class="form-control" value="${param._boxCode}" />
				</div>
				</div>
				
				<div class="col-sm-4">
			    <div class="input-group col-sm-12">
			    <button type="button" class="btn btn-info" onclick="load();">搜索</button>
			    <button type="button"class="btn btn-primary"  onclick="exportExcel();">导出Excel</button>
			    </div>
			    </div>
			    </div>
   </form>
	</div>
	</div>
	</div>
	</div>
	
	
	<div class="form-group row">
		<div class="col-md-12">
			<div class="box box-solid box-primary">
				<div class="box-header">
					<i class="fa fa-list"></i>
					<h3 class="box-title">查询结果</h3>
					<div class="box-tools pull-right">
						<button class="btn btn-primary btn-sm" data-widget="collapse" type="button">
							<i class="fa fa-minus"></i>
						</button>
					</div>
				</div>
				<div class="box-body">
	<!-- sku查询 -->
	<table id="viewStockTable" class="table table-striped table-bordered table-condensed">
		<thead><tr>
		    <th style="width: 100px;">序号</th>
		    <th style="width: 100px;">商家</th>
		    <th style="width: 90px;">仓库</th>
		    <th style="width: 100px;">SKU编码</th>
		    <th style="width: 100px;">货号</th>
		    <th style="width: 100px;">商品名</th>
		    <th style="width: 100px;">可销售库存</th>
		    <th style="width: 100px;">不可销售库存</th>
		    <th style="width: 100px;">订单占用库存</th>
		    <th style="width: 100px;">锁定库存</th>
		    <th style="width: 100px;">调拨占用库存</th>
		    <th style="width: 100px;">调拨中库存</th>
		    <th style="width: 100px;">库存总量</th>
		    <th>操作</th>
		</tr></thead>
		
		</table>
		
		
	<!-- stockCode查询 -->
	<table id="cusStockTable" class="table table-striped table-bordered table-condensed" >
		<thead><tr>
		 	<th style="width: 100px;">序号</th>
		    <th style="width: 100px;">商家名称</th>
		    <th style="width: 90px;">仓库网点</th>
		    <th style="width: 100px;">库位编码</th>
		    <th style="width: 100px;">箱子编码</th>
		    <th style="width: 100px;">SKU编码</th>
		    <th style="width: 100px;">批次号</th>
		    <th style="width: 100px;">生产日期</th>
		    <th style="width: 100px;">过期日期</th>
		    <th style="width: 100px;">货号</th>
		    <th style="width: 100px;">商品名</th>
		    <th style="width: 100px;">可销售库存</th>
		    <th style="width: 100px;">不可销售库存</th>
		    <th style="width: 100px;">订单占用库存</th>
		    <th style="width: 100px;">锁定库存</th>
		    <th style="width: 100px;">调拨占用库存</th>
		    <th style="width: 100px;">调拨中库存</th>
		    <th style="width: 100px;">库存总量</th>
		    <th style="width: 100px;">存放类型</th>
		</tr></thead>
		
		</table>
		
	<!-- 库存明细 -------------------------------------------------------------------------------------------------->
	<div  class="modal fade"  id="detail" >
	<form id="inputForm"  method="post" class="form-horizontal">
	<div class="modal-dialog">
			<div class="modal-content">
		<!-- 头 -->
		<div class="modal-header" ></div>
		<!-- 体 -->
		<div class="modal-body" style="height: 400px; overflow: scroll;">
		
		   <table class="table table-striped table-bordered table-condensed" >
        	  <thead>
        	    <th style="color: white;" bgcolor="#8EB4CB">商家</th>
			    <th style="color: white;" bgcolor="#8EB4CB">商家仓库</th>
			    <th style="color: white;" bgcolor="#8EB4CB">sku编码</th>
			  </thead>
	          <tr>
	             <td id="customerName"></td>
	             <td id="warehouseName"></td>
	             <td id="sku"></td>
	          </tr>
	        </table>  
		
			<table id="contentTable" class="table table-striped table-bordered table-condensed">
			<thead>
			<th style="vertical-align: middle; color: white;" bgcolor="#8EB4CB" colspan="10">库存信息</th>
			<tr>
			    <th style="width: 100px;">库位编码</th>
			    <th style="width: 100px;">箱子编码</th>
			    <th style="width: 100px;">可销售库存</th>
			    <th style="width: 100px;">不可销售库存</th>
			    <th style="width: 100px;">订单占用库存</th>
			    <th style="width: 100px;">锁定库存</th>
			    <th style="width: 100px;">调拨占用库存</th>
			    <th style="width: 100px;">调拨中库存</th>
			     <th>总量</th>
			    <th style="width: 100px;">存放类型</th>
			   
			</tr></thead>
			<tbody id="detail_content"></tbody>
			</table>		       
		      
		</div>
		<!-- 尾 -->
		<div class="modal-footer">
			<a class="btn btn-primary" data-dismiss="modal" aria-hidden="true">返回</a>
		</div>
		</div>
		</div>
        </form> 
     </div>
     <!------------------------------------------------------------------------------------------------------------->
	</div>
	</div>
	</div>
	</div>
</section>	
</body>
</html>
